<template>
    <div id="sign-show" :class="visible?'sign-show':''">
        <div class="sign">
            <div class="sign-mask"></div>
            <div class="sign-box">
                <form id="sign-mp" style="display: block">
                    <div class="form-item">
                        <div class="erphp-weixin-scan">
                            <div class="ews-title">微信支付</div>
                            <div style="font-size:24px;margin-top:10px;">￥{{payInfo.price}}</div>
                            <div style="font-size:14px;">使用微信客户端扫一扫</div>
                            <div style="width: 300px;height: 300px">
<!--                                <img :src="payQrcode" style="width: 300px;"/>-->
                                <vue-qr v-if="payQrcode" :text="payQrcode" :size="300"></vue-qr>
                            </div>
                            <div class="ews-tips">支付完成后请等待5秒左右，期间请勿刷新</div>
                        </div>
                    </div>
<!--                    <div class="form-policy" style="text-align:center">-->
<!--                        <label>扫码后代表已阅读并同意<a class="active" href="" target="_blank">《用户服务协议》</a>和<a-->
<!--                                class="active" href="" target="_blank">《隐私政策》</a></label>-->
<!--                    </div>-->
                </form>
                <div class="sign-wrap" @click="payHide">
                    <div class="sign-close">×</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import VueQr from 'vue-qr'
    export default {
        name: "login",
        model: {
            prop: 'visible',
            event: 'change'
        },
        components:{
            VueQr
        },
        props: {
            visible: Boolean,
            payInfo:{
                type: Object,
                default() { return {} }
            }

        },
        data() {
            return {
                payQrcode:'',
                qr_code_time:null
            };
        },
        watch: {
            visible(newName, oldName) {
                if(newName){

                    this.$apis.buyMember({type:this.payInfo.key}).then(res=>{
                        this.payQrcode=res.records.code_url
                        this.checkScan(res.records.order_number);
                    })
                    // this.$apis.getLoginCode({}).then(res=>{
                    //     this.loginQrcode=res.records.qrcodeUrl
                    //     this.checkScan(res.records.key);
                    // })
                }
            }
        },
        created(){
        },

        methods: {
            payHide(){
                clearInterval(this.qr_code_time);
                this.$emit('change', false)
            },
            checkScan(order_number){
                clearInterval(this.qr_code_time);
                this.qr_code_time = setInterval(() => {
                    this.$apis.queryOrder({orderNumber:order_number}).then(res=>{
                        console.log(res['records'])
                        if(res['records']&&res['records'][0].is_finished==1){
                            clearInterval(this.qr_code_time);
                            this.$emit('success')

                            this.payHide();
                        }
                    })
                }, 2000);
            },

        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
